<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">src/Webform.unit.js | formiojs</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<meta name="description" content="JavaScript powered Forms with JSON Form Builder"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="formiojs"><meta property="twitter:description" content="JavaScript powered Forms with JSON Form Builder"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/formio/formio.js"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/EventEmitter.js~EventEmitter.html">EventEmitter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/Form.js~Form.html">Form</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/FormBuilder.js~FormBuilder.html">FormBuilder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/Formio.js~Formio.html">Formio</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/PDF.js~PDF.html">PDF</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/PDFBuilder.js~PDFBuilder.html">PDFBuilder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/Webform.js~Webform.html">Webform</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/WebformBuilder.js~WebformBuilder.html">WebformBuilder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/Wizard.js~Wizard.html">Wizard</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/WizardBuilder.js~WizardBuilder.html">WizardBuilder</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#builders">builders</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/builders/Builders.js~Builders.html">Builders</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components">components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Components.js~Components.html">Components</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-component">components/_classes/component</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/_classes/component/Component.js~Component.html">Component</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Component">Component</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-component-editform">components/_classes/component/editForm</a><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-EditFormUtils">EditFormUtils</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-componentmodal">components/_classes/componentModal</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/_classes/componentModal/ComponentModal.js~ComponentModal.html">ComponentModal</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-field">components/_classes/field</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/_classes/field/Field.js~Field.html">Field</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-input">components/_classes/input</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/_classes/input/Input.js~Input.html">Input</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-multivalue">components/_classes/multivalue</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/_classes/multivalue/Multivalue.js~Multivalue.html">Multivalue</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components--classes-nested">components/_classes/nested</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/_classes/nested/NestedComponent.js~NestedComponent.html">NestedComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-NestedComponent">NestedComponent</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-address">components/address</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/address/Address.js~AddressComponent.html">AddressComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Address">Address</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-AddressComponentMode">AddressComponentMode</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-button">components/button</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/button/Button.js~ButtonComponent.html">ButtonComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Button">Button</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-checkbox">components/checkbox</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/checkbox/Checkbox.js~CheckBoxComponent.html">CheckBoxComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Checkbox">Checkbox</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-columns">components/columns</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/columns/Columns.js~ColumnsComponent.html">ColumnsComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Columns">Columns</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-container">components/container</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/container/Container.js~ContainerComponent.html">ContainerComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Container">Container</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-content">components/content</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/content/Content.js~ContentComponent.html">ContentComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Content">Content</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-currency">components/currency</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/currency/Currency.js~CurrencyComponent.html">CurrencyComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Currency">Currency</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-datagrid">components/datagrid</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/datagrid/DataGrid.js~DataGridComponent.html">DataGridComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-DataGrid">DataGrid</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-datamap">components/datamap</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/datamap/DataMap.js~DataMapComponent.html">DataMapComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-DataMap">DataMap</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-datetime">components/datetime</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/datetime/DateTime.js~DateTimeComponent.html">DateTimeComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-DateTime">DateTime</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-day">components/day</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/day/Day.js~DayComponent.html">DayComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Day">Day</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-editgrid">components/editgrid</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/editgrid/EditGrid.js~EditGridComponent.html">EditGridComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-EditGrid">EditGrid</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-email">components/email</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/email/Email.js~EmailComponent.html">EmailComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Email">Email</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-fieldset">components/fieldset</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/fieldset/Fieldset.js~FieldsetComponent.html">FieldsetComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Fieldset">Fieldset</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-file">components/file</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/file/File.js~FileComponent.html">FileComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-File">File</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-form">components/form</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/form/Form.js~FormComponent.html">FormComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Form">Form</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-hidden">components/hidden</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/hidden/Hidden.js~HiddenComponent.html">HiddenComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Hidden">Hidden</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-html">components/html</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/html/HTML.js~HTMLComponent.html">HTMLComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-HTML">HTML</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-number">components/number</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/number/Number.js~NumberComponent.html">NumberComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Number">Number</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-panel">components/panel</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/panel/Panel.js~PanelComponent.html">PanelComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Panel">Panel</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-password">components/password</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/password/Password.js~PasswordComponent.html">PasswordComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Password">Password</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-phonenumber">components/phonenumber</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/phonenumber/PhoneNumber.js~PhoneNumberComponent.html">PhoneNumberComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-PhoneNumber">PhoneNumber</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-radio">components/radio</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/radio/Radio.js~RadioComponent.html">RadioComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Radio">Radio</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-recaptcha">components/recaptcha</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/recaptcha/ReCaptcha.js~ReCaptchaComponent.html">ReCaptchaComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ReCaptcha">ReCaptcha</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-resource">components/resource</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/resource/Resource.js~ResourceComponent.html">ResourceComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Resource">Resource</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-select">components/select</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/select/Select.js~SelectComponent.html">SelectComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Select">Select</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-select-fixtures">components/select/fixtures</a><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-multiSelect">multiSelect</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-multiSelectOptions">multiSelectOptions</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-selectboxes">components/selectboxes</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/selectboxes/SelectBoxes.js~SelectBoxesComponent.html">SelectBoxesComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-SelectBoxes">SelectBoxes</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-signature">components/signature</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/signature/Signature.js~SignatureComponent.html">SignatureComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Signature">Signature</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-survey">components/survey</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Survey">Survey</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-table">components/table</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/table/Table.js~TableComponent.html">TableComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Table">Table</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-tabs">components/tabs</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/tabs/Tabs.js~TabsComponent.html">TabsComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Tabs">Tabs</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-tags">components/tags</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/tags/Tags.js~TagsComponent.html">TagsComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Tags">Tags</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-textarea">components/textarea</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/textarea/TextArea.js~TextAreaComponent.html">TextAreaComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-TextArea">TextArea</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-textfield">components/textfield</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/textfield/TextField.js~TextFieldComponent.html">TextFieldComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-TextField">TextField</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-time">components/time</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/time/Time.js~TimeComponent.html">TimeComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Time">Time</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-tree">components/tree</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/tree/Node.js~Node.html">Node</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/tree/Tree.js~TreeComponent.html">TreeComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Tree">Tree</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-unknown">components/unknown</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/unknown/Unknown.js~UnknownComponent.html">UnknownComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Unknown">Unknown</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-url">components/url</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/url/Url.js~UrlComponent.html">UrlComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Url">Url</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components-well">components/well</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/well/Well.js~WellComponent.html">WellComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Well">Well</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#contrib">contrib</a><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-Contrib">Contrib</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#contrib-edittable">contrib/edittable</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/contrib/edittable/EditTable.js~EditTableComponent.html">EditTableComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-EditTable">EditTable</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#contrib-location">contrib/location</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/contrib/location/Location.js~LocationComponent.html">LocationComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Location">Location</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#contrib-modaledit">contrib/modaledit</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/contrib/modaledit/ModalEdit.js~ModalEditComponent.html">ModalEditComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ModalEdit">ModalEdit</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#contrib-stripe-checkout">contrib/stripe/checkout</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/contrib/stripe/checkout/StripeCheckout.js~StripeCheckoutComponent.html">StripeCheckoutComponent</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#contrib-stripe-stripe">contrib/stripe/stripe</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/contrib/stripe/stripe/Stripe.js~StripeComponent.html">StripeComponent</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#displays">displays</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/displays/Displays.js~Displays.html">Displays</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#providers">providers</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/providers/Providers.js~Providers.html">Providers</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#providers-address">providers/address</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/providers/address/AddressProvider.js~AddressProvider.html">AddressProvider</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/providers/address/AzureAddressProvider.js~AzureAddressProvider.html">AzureAddressProvider</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/providers/address/CustomAddressProvider.js~CustomAddressProvider.html">CustomAddressProvider</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/providers/address/GoogleAddressProvider.js~GoogleAddressProvider.html">GoogleAddressProvider</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/providers/address/NominatimAddressProvider.js~NominatimAddressProvider.html">NominatimAddressProvider</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#providers-storage">providers/storage</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-azure">azure</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-base64">base64</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-dropbox">dropbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-indexeddb">indexeddb</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-s3">s3</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-url">url</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-XHR">XHR</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#templates">templates</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/templates/Templates.js~Templates.html">Templates</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#templates-bootstrap">templates/bootstrap</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-iconClass">iconClass</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/utils/ChoicesWrapper.js~ChoicesWrapper.html">ChoicesWrapper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkInvalidDate">checkInvalidDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-lessOrGreater">lessOrGreater</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-applyFormChanges">applyFormChanges</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-eachComponent">eachComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-escapeRegExCharacters">escapeRegExCharacters</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-findComponent">findComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-findComponents">findComponents</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-flattenComponents">flattenComponents</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatAsCurrency">formatAsCurrency</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-generateFormChange">generateFormChange</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getComponent">getComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getStrings">getStrings</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getValue">getValue</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-hasCondition">hasCondition</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isLayoutComponent">isLayoutComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-matchComponent">matchComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-parseFloatExt">parseFloatExt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeComponent">removeComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-searchComponents">searchComponents</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-boolValue">boolValue</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-bootstrapVersion">bootstrapVersion</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkCalculated">checkCalculated</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkCondition">checkCondition</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkCustomConditional">checkCustomConditional</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkJsonConditional">checkJsonConditional</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkSimpleConditional">checkSimpleConditional</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-checkTrigger">checkTrigger</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertFormatToFlatpickr">convertFormatToFlatpickr</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertFormatToMask">convertFormatToMask</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertFormatToMoment">convertFormatToMoment</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-currentTimezone">currentTimezone</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-delay">delay</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-evaluate">evaluate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-fastCloneDeep">fastCloneDeep</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-fieldData">fieldData</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatDate">formatDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatOffset">formatOffset</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getArrayFromComponentPath">getArrayFromComponentPath</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getContextComponents">getContextComponents</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getCurrencyAffixes">getCurrencyAffixes</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getDateSetting">getDateSetting</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getElementRect">getElementRect</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getInputMask">getInputMask</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getLocaleDateFormatInfo">getLocaleDateFormatInfo</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getNumberDecimalLimit">getNumberDecimalLimit</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getNumberSeparators">getNumberSeparators</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getPropertyValue">getPropertyValue</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getRandomComponentId">getRandomComponentId</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getStringFromComponentPath">getStringFromComponentPath</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-guid">guid</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isInputComponent">isInputComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isMongoId">isMongoId</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isValidDate">isValidDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-iterateKey">iterateKey</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-loadZones">loadZones</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-matchInputMask">matchInputMask</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-momentDate">momentDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-observeOverload">observeOverload</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-offsetDate">offsetDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-round">round</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sanitize">sanitize</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-setActionProperty">setActionProperty</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-shouldLoadZones">shouldLoadZones</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-unfold">unfold</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-uniqueKey">uniqueKey</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-uniqueName">uniqueName</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-withSwitch">withSwitch</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-zonesLoaded">zonesLoaded</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-KEY_CODES">KEY_CODES</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-Evaluator">Evaluator</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-CALENDAR_ERROR_MESSAGES">CALENDAR_ERROR_MESSAGES</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-firstNonNil">firstNonNil</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-interpolate">interpolate</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils-jsonlogic">utils/jsonlogic</a><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-lodashOperators">lodashOperators</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#validator">validator</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/validator/Rules.js~Rules.html">Rules</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/validator/Validator.js~ValidationChecker.html">ValidationChecker</a></span></span></li>
<li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#widgets">widgets</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/widgets/CalendarWidget.js~CalendarWidget.html">CalendarWidget</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/widgets/InputWidget.js~InputWidget.html">InputWidget</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">src/Webform.unit.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import assert from &apos;power-assert&apos;;
import { expect } from &apos;chai&apos;;
import sinon from &apos;sinon&apos;;
import _ from &apos;lodash&apos;;
import each from &apos;lodash/each&apos;;
import Harness from &apos;../test/harness&apos;;
import FormTests from &apos;../test/forms&apos;;
import Webform from &apos;./Webform&apos;;
import {
  settingErrors,
  clearOnHide,
  manualOverride,
  validationOnBlur,
  calculateValueWithManualOverride
} from &apos;../test/formtest&apos;;
// import Formio from &apos;./Formio&apos;;
// import { APIMock } from &apos;../test/APIMock&apos;;

describe(&apos;Webform tests&apos;, () =&gt; {
  let formWithCalculatedValue;

  it(&apos;Should calculate the field value after validation errors appeared on submit&apos;, function(done) {
    const formElement = document.createElement(&apos;div&apos;);
    formWithCalculatedValue = new Webform(formElement);
    formWithCalculatedValue.setForm(manualOverride).then(() =&gt; {
      Harness.clickElement(formWithCalculatedValue, formWithCalculatedValue.components[2].refs.button);
      setTimeout(() =&gt; {
        const inputEvent = new Event(&apos;input&apos;);
        const input1 = formWithCalculatedValue.components[0].refs.input[0];

          input1.value =  55;
          input1.dispatchEvent(inputEvent);

        setTimeout(() =&gt; {
          const input2 = formElement.querySelector(&apos;input[name=&quot;data[number2]&quot;]&apos;);
          assert.equal(input2.value, &apos;55&apos;);
          assert.equal(input1.value, 55);
          done();
        }, 250);
      }, 250);
    })
    .catch((err) =&gt; done(err));
  });

  it(&apos;Should calculate the value when editing set values with possibility of manual override&apos;, function(done) {
    const formElement = document.createElement(&apos;div&apos;);
    formWithCalculatedValue = new Webform(formElement);
    formWithCalculatedValue.setForm(manualOverride).then(() =&gt; {
      formWithCalculatedValue.setSubmission({
        data:{
          number1: 66,
          number2:66
        }
      }).then(()=&gt;{
        setTimeout(()=&gt;{
          const input1 = formElement.querySelector(&apos;input[name=&quot;data[number1]&quot;]&apos;);
          const input2 = formElement.querySelector(&apos;input[name=&quot;data[number2]&quot;]&apos;);

          assert.equal(input2.value, &apos;66&apos;);
          assert.equal(input1.value, 66);

          const inputEvent = new Event(&apos;input&apos;);

          input1.value =  `${input1.value}` + &apos;78&apos;;
          input1.dispatchEvent(inputEvent);

          setTimeout(() =&gt; {
            assert.equal(input2.value, &apos;6678&apos;);
            assert.equal(input1.value, 6678);
            //set a number as calculated value
            formWithCalculatedValue.components[1].calculatedValue = 6678;
            //change the value
            input1.value =  +(`${input1.value}` + &apos;90&apos;);
            input1.dispatchEvent(inputEvent);

            setTimeout(() =&gt; {
              assert.equal(input2.value, &apos;667890&apos;);
              assert.equal(input1.value, 667890);
              done();
            }, 250);
          }, 250);
        }, 900);
      });
    });
  });

  let simpleForm = null;
  it(&apos;Should create a simple form&apos;, (done) =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    simpleForm = new Webform(formElement);
    simpleForm.setForm({
      title: &apos;Simple Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          key: &apos;firstName&apos;,
          input: true
        },
        {
          type: &apos;textfield&apos;,
          key: &apos;lastName&apos;,
          input: true
        }
      ]
    }).then(() =&gt; {
      Harness.testElements(simpleForm, &apos;input[type=&quot;text&quot;]&apos;, 2);
      Harness.testElements(simpleForm, &apos;input[name=&quot;data[firstName]&quot;]&apos;, 1);
      Harness.testElements(simpleForm, &apos;input[name=&quot;data[lastName]&quot;]&apos;, 1);
      done();
    }).catch(done);
  });

  it(&apos;Should set a submission to the form.&apos;, () =&gt; {
    Harness.testSubmission(simpleForm, { data: {
      firstName: &apos;Joe&apos;,
      lastName: &apos;Smith&apos;
    } });
  });

  it(&apos;Should translate a form from options&apos;, done =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    const translateForm = new Webform(formElement, {
      template: &apos;bootstrap3&apos;,
      language: &apos;es&apos;,
      i18n: {
        es: {
          &apos;Default Label&apos;: &apos;Spanish Label&apos;
        }
      }
    });
    translateForm.setForm({
      title: &apos;Translate Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          label: &apos;Default Label&apos;,
          key: &apos;myfield&apos;,
          input: true,
          inputType: &apos;text&apos;,
          validate: {}
        }
      ]
    }).then(() =&gt; {
      const label = formElement.querySelector(&apos;.control-label&apos;);
      assert.equal(label.innerHTML.trim(), &apos;Spanish Label&apos;);
      done();
    }).catch(done);
  });

  it(&apos;Should translate a form after instantiate&apos;, done =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    const translateForm = new Webform(formElement, {
      template: &apos;bootstrap3&apos;,
      i18n: {
        es: {
          &apos;Default Label&apos;: &apos;Spanish Label&apos;
        }
      }
    });
    translateForm.setForm({
      title: &apos;Translate Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          label: &apos;Default Label&apos;,
          key: &apos;myfield&apos;,
          input: true,
          inputType: &apos;text&apos;,
          validate: {}
        }
      ]
    }).then(() =&gt; {
      translateForm.language = &apos;es&apos;;
      const label = formElement.querySelector(&apos;.control-label&apos;);
      assert.equal(label.innerHTML.trim(), &apos;Spanish Label&apos;);
      done();
    }).catch(done);
  });

  it(&apos;Should add a translation after instantiate&apos;, done =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    const translateForm = new Webform(formElement, {
      template: &apos;bootstrap3&apos;,
      i18n: {
        language: &apos;es&apos;,
        es: {
          &apos;Default Label&apos;: &apos;Spanish Label&apos;
        },
        fr: {
          &apos;Default Label&apos;: &apos;French Label&apos;
        }
      }
    });
    translateForm.setForm({
      title: &apos;Translate Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          label: &apos;Default Label&apos;,
          key: &apos;myfield&apos;,
          input: true,
          inputType: &apos;text&apos;,
          validate: {}
        }
      ]
    }).then(() =&gt; {
      translateForm.language = &apos;fr&apos;;
      const label = formElement.querySelector(&apos;.control-label&apos;);
      assert.equal(label.innerHTML.trim(), &apos;French Label&apos;);
      done();
    }).catch(done);
  });

  it(&apos;Should switch a translation after instantiate&apos;, done =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    const translateForm = new Webform(formElement, {
      template: &apos;bootstrap3&apos;,
    });
    translateForm.setForm({
      title: &apos;Translate Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          label: &apos;Default Label&apos;,
          key: &apos;myfield&apos;,
          input: true,
          inputType: &apos;text&apos;,
          validate: {}
        }
      ]
    }).then(() =&gt; {
      translateForm.addLanguage(&apos;es&apos;, { &apos;Default Label&apos;: &apos;Spanish Label&apos; }, true);
      const label = formElement.querySelector(&apos;.control-label&apos;);
      assert.equal(label.innerHTML.trim(), &apos;Spanish Label&apos;);
      done();
    }).catch(done);
  });

  it(&apos;Should keep translation after redraw&apos;, done =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    const form = new Webform(formElement, {
      template: &apos;bootstrap3&apos;,
    });
    const schema = {
      title: &apos;Translate Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          label: &apos;Default Label&apos;,
          key: &apos;myfield&apos;,
          input: true,
          inputType: &apos;text&apos;,
          validate: {}
        }
      ]
    };

    try {
      form.setForm(schema)
        .then(() =&gt; {
          form.addLanguage(&apos;ru&apos;, { &apos;Default Label&apos;: &apos;Russian Label&apos; }, true);
          return form.language = &apos;ru&apos;;
        }, done)
        .then(() =&gt; {
          expect(form.options.language).to.equal(&apos;ru&apos;);
          expect(formElement.querySelector(&apos;.control-label&apos;).innerHTML.trim()).to.equal(&apos;Russian Label&apos;);
          form.redraw();
          expect(form.options.language).to.equal(&apos;ru&apos;);
          expect(formElement.querySelector(&apos;.control-label&apos;).innerHTML.trim()).to.equal(&apos;Russian Label&apos;);
          done();
        }, done)
        .catch(done);
    }
    catch (error) {
      done(error);
    }
  });

  it(&apos;Should fire languageChanged event when language is set&apos;, done =&gt; {
    let isLanguageChangedEventFired = false;
    const formElement = document.createElement(&apos;div&apos;);
    const form = new Webform(formElement, {
      template: &apos;bootstrap3&apos;,
    });
    const schema = {
      title: &apos;Translate Form&apos;,
      components: [
        {
          type: &apos;textfield&apos;,
          label: &apos;Default Label&apos;,
          key: &apos;myfield&apos;,
          input: true,
          inputType: &apos;text&apos;,
          validate: {}
        }
      ]
    };

    try {
      form.setForm(schema)
        .then(() =&gt; {
          form.addLanguage(&apos;ru&apos;, { &apos;Default Label&apos;: &apos;Russian Label&apos; }, false);
          form.on(&apos;languageChanged&apos;, () =&gt; {
            isLanguageChangedEventFired = true;
          });
          return form.language = &apos;ru&apos;;
        }, done)
        .then(() =&gt; {
          assert(isLanguageChangedEventFired);
          done();
        }, done)
        .catch(done);
    }
    catch (error) {
      done(error);
    }
  });

  it(&apos;When submitted should strip fields with persistent: client-only from submission&apos;, done =&gt; {
    const formElement = document.createElement(&apos;div&apos;);
    simpleForm = new Webform(formElement);
    /* eslint-disable quotes */
    simpleForm.setForm({
      title: &apos;Simple Form&apos;,
      components: [
        {
          &quot;label&quot;: &quot;Name&quot;,
          &quot;allowMultipleMasks&quot;: false,
          &quot;showWordCount&quot;: false,
          &quot;showCharCount&quot;: false,
          &quot;tableView&quot;: true,
          &quot;type&quot;: &quot;textfield&quot;,
          &quot;input&quot;: true,
          &quot;key&quot;: &quot;name&quot;,
          &quot;widget&quot;: {
            &quot;type&quot;: &quot;&quot;
          }
        },
        {
          &quot;label&quot;: &quot;Age&quot;,
          &quot;persistent&quot;: &quot;client-only&quot;,
          &quot;mask&quot;: false,
          &quot;tableView&quot;: true,
          &quot;type&quot;: &quot;number&quot;,
          &quot;input&quot;: true,
          &quot;key&quot;: &quot;age&quot;
        }
      ]
    });
    /* eslint-enable quotes */

    Harness.testSubmission(simpleForm, {
      data: { name: &apos;noname&apos;, age: &apos;1&apos; }
    });

    simpleForm.submit().then((submission) =&gt; {
      assert.deepEqual(submission.data, { name: &apos;noname&apos; });
      done();
    });
  });

  it(&apos;Should keep components valid if they are pristine&apos;, function(done) {
    const formElement = document.createElement(&apos;div&apos;);
    const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(settingErrors).then(() =&gt; {
      const inputEvent = new Event(&apos;input&apos;, { bubbles: true, cancelable: true });
      const input = form.element.querySelector(&apos;input[name=&quot;data[textField]&quot;]&apos;);
      for (let i = 0; i &lt; 50; i++) {
        input.value += i;
        input.dispatchEvent(inputEvent);
      }
      this.timeout(1000);
      setTimeout(() =&gt; {
        assert.equal(form.errors.length, 0);
        Harness.setInputValue(form, &apos;data[textField]&apos;, &apos;&apos;);
        setTimeout(() =&gt; {
          assert.equal(form.errors.length, 1);
          done();
        }, 250);
      }, 250);
    });
  });

  it(&apos;Should delete value of hidden component if clearOnHide is turned on&apos;, function(done) {
    const formElement = document.createElement(&apos;div&apos;);
    const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(clearOnHide).then(() =&gt; {
      const visibleData = {
        data: {
          visible: &apos;yes&apos;,
          clearOnHideField: &apos;some text&apos;,
          submit: false
        },
        metadata: {}
      };

      const hiddenData = {
        data: {
          visible: &apos;no&apos;,
          submit: false
        }
      };
      const inputEvent = new Event(&apos;input&apos;, { bubbles: true, cancelable: true });
      const textField = form.element.querySelector(&apos;input[name=&quot;data[clearOnHideField]&quot;]&apos;);
      textField.value = &apos;some text&apos;;
      textField.dispatchEvent(inputEvent);
      this.timeout(1000);
      setTimeout(() =&gt; {
        assert.deepEqual(form.data, visibleData.data);
        Harness.setInputValue(form, &apos;data[visible]&apos;, &apos;no&apos;);

        setTimeout(() =&gt; {
          assert.deepEqual(form.data, hiddenData.data);
          done();
        }, 250);
      }, 250);
    });
  });

  const formElement = document.createElement(&apos;div&apos;);
  const checkForErrors = function(form, flags = {}, submission, numErrors, done) {
    form.setSubmission(submission, flags).then(() =&gt; {
      setTimeout(() =&gt; {
        const errors = formElement.querySelectorAll(&apos;.formio-error-wrapper&apos;);
        expect(errors.length).to.equal(numErrors);
        expect(form.errors.length).to.equal(numErrors);
        done();
      }, 100);
    }).catch(done);
  };

  it(&apos;Should not fire validations when fields are either protected or not persistent.&apos;, (done) =&gt; {
    const form = new Webform(formElement,{ language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(
      {
        title: &apos;protected and persistent&apos;,
        components: [
          {
            type: &apos;textfield&apos;,
            label: &apos;A&apos;,
            key: &apos;a&apos;,
            validate: {
              required: true
            }
          },
          {
            type: &apos;textfield&apos;,
            label: &apos;B&apos;,
            key: &apos;b&apos;,
            protected: true,
            validate: {
              required: true
            }
          }
        ],
      }).then(() =&gt; {
        checkForErrors(form, {}, {}, 0, () =&gt; {
          checkForErrors(form, {}, {
            data: {
              a: &apos;Testing&apos;,
              b: &apos;&apos;
            }
          }, 1, () =&gt; {
            checkForErrors(form, {}, {
              _id: &apos;123123123&apos;,
              data: {
                a: &apos;Testing&apos;,
                b: &apos;&apos;
              }
            }, 0, done);
          });
        });
    });
  });

  it(&apos;Should not fire validation on init.&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement,{ language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }).then(() =&gt; {
        checkForErrors(form, {}, {}, 0, done);
    });
  });

  it(&apos;Should validation on init when alwaysDirty flag is set.&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement, {
      language: &apos;en&apos;,
      template: &apos;bootstrap3&apos;,
      alwaysDirty: true
    });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }).then(() =&gt; {
      checkForErrors(form, {}, {}, 2, done);
    });
  });

  it(&apos;Should validation on init when dirty flag is set.&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement, {
      language: &apos;en&apos;,
      template: &apos;bootstrap3&apos;
    });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }).then(() =&gt; {
      checkForErrors(form, {
        dirty: true
      }, {}, 2, done);
    });
  });

  it(&apos;Should not show any errors on setSubmission when providing an empty data object&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement,{ language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }
    ).then(() =&gt; {
      checkForErrors(form, {}, {}, 0, done);
    });
  });

  it(&apos;Should not show errors when providing empty data object with data set.&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement,{ language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }
    ).then(() =&gt; {
      checkForErrors(form, {}, { data: {} }, 0, done);
    });
  });

  it(&apos;Should show errors on setSubmission when providing explicit data values.&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement,{ language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }
    ).then(() =&gt; {
      checkForErrors(form, {}, {
        data:{
          number: 2,
          textArea: &apos;&apos;
        }
      }, 2, done);
    });
  });

  it(&apos;Should not show errors on setSubmission with noValidate:TRUE&apos;, (done) =&gt; {
    formElement.innerHTML = &apos;&apos;;
    const form = new Webform(formElement,{ language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
    form.setForm(
      { title: &apos;noValidation flag&apos;,
        components: [{
          label: &apos;Number&apos;,
          validate: {
            required: true,
            min: 5
          },
          key: &apos;number&apos;,
          type: &apos;number&apos;,
          input: true
        }, {
          label: &apos;Text Area&apos;,
          validate: {
            required: true,
            minLength: 10
          },
          key: &apos;textArea&apos;,
          type: &apos;textarea&apos;,
          input: true
        }],
      }
    ).then(() =&gt; {
      checkForErrors(form, {
        noValidate:true
      }, {
        data:{
          number: 2,
          textArea: &apos;&apos;
        }
      }, 0, done);
    });
  });

  describe(&apos;set/get nosubmit&apos;, () =&gt; {
    it(&apos;should set/get nosubmit flag and emit nosubmit event&apos;, () =&gt; {
      const form = new Webform(null, {});
      const emit = sinon.spy(form, &apos;emit&apos;);
      expect(form.nosubmit).to.be.false;
      form.nosubmit = true;
      expect(form.nosubmit).to.be.true;
      expect(emit.callCount).to.equal(1);
      expect(emit.args[0]).to.deep.equal([&apos;nosubmit&apos;, true]);
      form.nosubmit = false;
      expect(form.nosubmit).to.be.false;
      expect(emit.callCount).to.equal(2);
      expect(emit.args[1]).to.deep.equal([&apos;nosubmit&apos;, false]);
    });
  });

  describe(&apos;getValue and setValue&apos;, () =&gt; {
    it(&apos;should setValue and getValue&apos;, (done) =&gt; {
      formElement.innerHTML = &apos;&apos;;
      const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
      form.setForm({
        components: [
          {
            type: &apos;textfield&apos;,
            key: &apos;a&apos;
          },
          {
            type: &apos;container&apos;,
            key: &apos;b&apos;,
            components: [
              {
                type: &apos;datagrid&apos;,
                key: &apos;c&apos;,
                components: [
                  {
                    type: &apos;textfield&apos;,
                    key: &apos;d&apos;
                  },
                  {
                    type: &apos;textfield&apos;,
                    key: &apos;e&apos;
                  },
                  {
                    type: &apos;editgrid&apos;,
                    key: &apos;f&apos;,
                    components: [
                      {
                        type: &apos;textfield&apos;,
                        key: &apos;g&apos;
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }).then(() =&gt; {
        let count = 0;
        const onChange = form.onChange;
        form.onChange = function(...args) {
          count++;
          return onChange.apply(form, args);
        };

        // Ensure that it says it changes.
        assert.equal(form.setValue({
          a: &apos;a&apos;,
          b: {
            c: [
              { d: &apos;d1&apos;, e: &apos;e1&apos;, f: [{ g: &apos;g1&apos; }] },
              { d: &apos;d2&apos;, e: &apos;e2&apos;, f: [{ g: &apos;g2&apos; }] },
            ]
          }
        }), true);

        setTimeout(() =&gt; {
          // It should have only updated once.
          assert.equal(count, 1);
          done();
        }, 500);
      });
    });
  });

  describe(&apos;ReadOnly Form&apos;, () =&gt; {
    it(&apos;Should apply conditionals when in readOnly mode.&apos;, (done) =&gt; {
      done = _.once(done);
      const Conditions = require(&apos;../test/forms/conditions&apos;).default;
      const formElement = document.createElement(&apos;div&apos;);
      const form = new Webform(formElement, {
        readOnly: true,
        language: &apos;en&apos;,
        template: &apos;bootstrap3&apos;
      });
      form.setForm(Conditions.form).then(() =&gt; {
        Harness.testConditionals(form, {
          data: {
            typeShow: &apos;Show&apos;,
            typeMe: &apos;Me&apos;,
            typeThe: &apos;The&apos;,
            typeMonkey: &apos;Monkey!&apos;
          }
        }, [], (error) =&gt; {
          form.destroy();
          if (error) {
            throw new Error(error);
          }
          done();
        });
      });
    });
  });

  describe(&apos;Validate onBlur&apos;, () =&gt; {
    it(&apos;Should keep component valid onChange when validate trigger is onBlur&apos;, (done) =&gt; {
      formElement.innerHTML = &apos;&apos;;
      const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
      form.setForm(validationOnBlur).then(() =&gt; {
        const field = form.components[0];
        const fieldInput = field.refs.input[0];

        Harness.clickElement(form, fieldInput);
        const inputEvent = new Event(&apos;input&apos;);
        fieldInput.value =  &apos;12&apos;;
        fieldInput.dispatchEvent(inputEvent);

        setTimeout(() =&gt; {
          assert.equal(field.errors.length, 0);
          const blurEvent = new Event(&apos;blur&apos;);
          fieldInput.dispatchEvent(blurEvent);

          setTimeout(() =&gt; {
            assert.equal(field.errors.length, 1);
            done();
          }, 250);
        }, 250);
      });
    });
  });

  describe(&apos;Reset values&apos;, () =&gt; {
    it(&apos;Should reset all values correctly.&apos;, () =&gt; {
      formElement.innerHTML = &apos;&apos;;
      const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
      return form.setForm(
        {
          components: [
            {
              type: &apos;textfield&apos;,
              key: &apos;firstName&apos;,
              label: &apos;First Name&apos;,
              placeholder: &apos;Enter your first name.&apos;,
              input: true,
              tooltip: &apos;Enter your &lt;strong&gt;First Name&lt;/strong&gt;&apos;,
              description: &apos;Enter your &lt;strong&gt;First Name&lt;/strong&gt;&apos;
            },
            {
              type: &apos;textfield&apos;,
              key: &apos;lastName&apos;,
              label: &apos;Last Name&apos;,
              placeholder: &apos;Enter your last name&apos;,
              input: true,
              tooltip: &apos;Enter your &lt;strong&gt;Last Name&lt;/strong&gt;&apos;,
              description: &apos;Enter your &lt;strong&gt;Last Name&lt;/strong&gt;&apos;
            },
            {
              type: &apos;select&apos;,
              label: &apos;Favorite Things&apos;,
              key: &apos;favoriteThings&apos;,
              placeholder: &apos;These are a few of your favorite things...&apos;,
              data: {
                values: [
                  {
                    value: &apos;raindropsOnRoses&apos;,
                    label: &apos;Raindrops on roses&apos;
                  },
                  {
                    value: &apos;whiskersOnKittens&apos;,
                    label: &apos;Whiskers on Kittens&apos;
                  },
                  {
                    value: &apos;brightCopperKettles&apos;,
                    label: &apos;Bright Copper Kettles&apos;
                  },
                  {
                    value: &apos;warmWoolenMittens&apos;,
                    label: &apos;Warm Woolen Mittens&apos;
                  }
                ]
              },
              dataSrc: &apos;values&apos;,
              template: &apos;&lt;span&gt;{{ item.label }}&lt;/span&gt;&apos;,
              multiple: true,
              input: true
            },
            {
              type: &apos;number&apos;,
              key: &apos;number&apos;,
              label: &apos;Number&apos;,
              input: true
            },
            {
              type: &apos;button&apos;,
              action: &apos;submit&apos;,
              label: &apos;Submit&apos;,
              theme: &apos;primary&apos;
            }
          ]
        }
      ).then(() =&gt; {
        form.setSubmission({
          data: {
            firstName: &apos;Joe&apos;,
            lastName: &apos;Bob&apos;,
            favoriteThings: [&apos;whiskersOnKittens&apos;, &apos;warmWoolenMittens&apos;],
            number: 233
          }
        }).then(() =&gt; {
          expect(form.submission).to.deep.equal({
            data: {
              firstName: &apos;Joe&apos;,
              lastName: &apos;Bob&apos;,
              favoriteThings: [&apos;whiskersOnKittens&apos;, &apos;warmWoolenMittens&apos;],
              number: 233,
              submit: false
            }
          });
          form.setSubmission({ data: {} }).then(() =&gt; {
            expect(form.submission).to.deep.equal({
              data: {
                firstName: &apos;&apos;,
                lastName: &apos;&apos;,
                favoriteThings: [],
                submit: false
              }
            });
          });
        });
      });
    });
  });

  describe(&apos;Calculate Value with allowed manual override&apos;, () =&gt; {
    it(&apos;Should reset all values correctly.&apos;, (done) =&gt; {
      const formElement = document.createElement(&apos;div&apos;);
      const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
      form.setForm(calculateValueWithManualOverride).then(() =&gt; {
        const dataGrid = form.getComponent(&apos;dataGrid&apos;);
        dataGrid.setValue([{ label: &apos;yes&apos; }, { label: &apos;no&apos; }]);
        setTimeout(() =&gt; {
          expect(form.submission).to.deep.equal({
            data: {
              dataGrid: [
                { label: &apos;yes&apos;, value: &apos;yes&apos; },
                { label: &apos;no&apos;, value: &apos;no&apos; },
              ],
              checkbox: false,
              submit: false
            },
            metadata: {}
          });
          const row1Value = form.getComponent([&apos;dataGrid&apos;, 0, &apos;value&apos;]);
          const row2Value = form.getComponent([&apos;dataGrid&apos;, 1, &apos;value&apos;]);
          row1Value.setValue(&apos;y&apos;);
          row2Value.setValue(&apos;n&apos;);

          setTimeout(() =&gt; {
            expect(form.submission).to.deep.equal({
              data: {
                dataGrid: [
                  { label: &apos;yes&apos;, value: &apos;y&apos; },
                  { label: &apos;no&apos;, value: &apos;n&apos; },
                ],
                checkbox: false,
                submit: false
              },
              metadata: {}
            });
            const row1Label = form.getComponent([&apos;dataGrid&apos;, 0, &apos;label&apos;]);
            row1Label.setValue(&apos;yes2&apos;);
            setTimeout(() =&gt; {
              expect(form.submission).to.deep.equal({
                data: {
                  dataGrid: [
                    { label: &apos;yes2&apos;, value: &apos;yes2&apos; },
                    { label: &apos;no&apos;, value: &apos;n&apos; },
                  ],
                  checkbox: false,
                  submit: false
                },
                metadata: {}
              });
              done();
            }, 250);
          }, 250);
        }, 250);
      }).catch(done);
    });
  });

  each(FormTests, (formTest) =&gt; {
    describe(formTest.title || &apos;&apos;, () =&gt; {
      each(formTest.tests, (formTestTest, title) =&gt; {
        it(title, () =&gt; {
          const formElement = document.createElement(&apos;div&apos;);
          const form = new Webform(formElement, { language: &apos;en&apos;, template: &apos;bootstrap3&apos; });
          return form.setForm(formTest.form).then(() =&gt; {
            formTestTest(form, (error) =&gt; {
              form.destroy();
              if (error) {
                throw new Error(error);
              }
            });
          });
        });
      });
    });
  });
});

// describe(&apos;Test the saveDraft and restoreDraft feature&apos;, () =&gt; {
//   APIMock.submission(&apos;https://savedraft.form.io/myform&apos;, {
//     components: [
//       {
//         type: &apos;textfield&apos;,
//         key: &apos;a&apos;,
//         label: &apos;A&apos;
//       },
//       {
//         type: &apos;textfield&apos;,
//         key: &apos;b&apos;,
//         label: &apos;B&apos;
//       }
//     ]
//   });
//
//   const saveDraft = function(user, draft, newData, done) {
//     const formElement = document.createElement(&apos;div&apos;);
//     const form = new Webform(formElement, {
//       saveDraft: true,
//       saveDraftThrottle: false
//     });
//     form.src = &apos;https://savedraft.form.io/myform&apos;;
//     Formio.setUser(user);
//     form.on(&apos;restoreDraft&apos;, (existing) =&gt; {
//       assert.deepEqual(existing ? existing.data : null, draft);
//       form.setSubmission({ data: newData }, { modified: true });
//     });
//     form.on(&apos;saveDraft&apos;, (saved) =&gt; {
//       // Make sure the modified class was added to the components.
//       const a = form.getComponent(&apos;a&apos;);
//       const b = form.getComponent(&apos;b&apos;);
//       assert.equal(a.hasClass(a.getElement(), &apos;formio-modified&apos;), true);
//       assert.equal(b.hasClass(b.getElement(), &apos;formio-modified&apos;), true);
//       assert.deepEqual(saved.data, newData);
//       form.draftEnabled = false;
//       done();
//     });
//     form.formReady.then(() =&gt; {
//       assert.equal(form.savingDraft, true);
//     });
//   };
//
//   it(&apos;Should allow a user to start a save draft session.&apos;, (done) =&gt; saveDraft({
//     _id: &apos;1234&apos;,
//     data: {
//       firstName: &apos;Joe&apos;,
//       lastName: &apos;Smith&apos;
//     }
//   }, null, {
//     a: &apos;one&apos;,
//     b: &apos;two&apos;
//   }, done));
//
//   it(&apos;Should allow a different user to start a new draft session&apos;, (done) =&gt; saveDraft({
//     _id: &apos;2468&apos;,
//     data: {
//       firstName: &apos;Sally&apos;,
//       lastName: &apos;Thompson&apos;
//     }
//   }, null, {
//     a: &apos;three&apos;,
//     b: &apos;four&apos;
//   }, done));
//
//   it(&apos;Should restore a users existing draft&apos;, (done) =&gt; saveDraft({
//     _id: &apos;1234&apos;,
//     data: {
//       firstName: &apos;Joe&apos;,
//       lastName: &apos;Smith&apos;
//     }
//   }, {
//     a: &apos;one&apos;,
//     b: &apos;two&apos;
//   }, {
//     a: &apos;five&apos;,
//     b: &apos;six&apos;
//   }, done));
// });
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
